@import '../style/var';
@import '../style/functions';
@import '../style/mixins';

/*----------------------------------------*/
/*  Alert Element Styles
/*----------------------------------------*/

//
// Alert
//

// Default
.em-alert {
  $last-rule: &;
  position: relative;
  padding: $--alert-padding-y $--alert-padding-x;
  margin-bottom: $--alert-margin-bottom;
  border: 1px solid transparent;
  @include border-radius($--alert-border-radius);

  display: flex;
  align-items: stretch;

  // Headings for larger alerts
  &__title {
    // Specified to prevent conflicts of changing $headings-color
    font-weight: bold;
  }

  // Headings for larger alerts
  &__text {
    // Specified to prevent conflicts of changing $headings-color
    font-size: $--font-size-sm;
    align-self: center;
    flex-grow: 1;
  }

  &__title + &__text {
    margin-top: 5px;
  }

  &__text + * {
    margin-top: 0.75rem;
  }

  // Provide class for links that match alerts
  &__link {
    font-weight: $--alert-link-font-weight;
  }

  &__icon {
    display: flex;
    padding: 0 1.25rem 0 0;

    i {
      font-size: 2rem;
    }

    &--top {
      align-items: flex-start;
      align-content: stretch;
    }
  }

  &__close {
    font-size: 10px;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
    transition: $--transition-link;
    &:focus,
    &:hover {
      transition: $--transition-link;
    }
  }

  // Theme colors
  @each $name, $color in $theme-colors {
    // Solid style
    &--#{$name} {
      background-color: $color;
      border-color: $color;
      color: theme-inverse-color($name);

      #{$last-rule}__icon {
        i {
          opacity: 0.8;
        }
      }

      #{$last-rule}__title,
      #{$last-rule}__text {
        color: theme-inverse-color($name);
      }

      #{$last-rule}__close {
        opacity: 0.8;
        color: $--white;
        &:focus,
        &:hover {
          opacity: 1;
          color: theme-inverse-color($name);
        }
      }
    }

    // Light style
    &--light-#{$name} {
      background-color: theme-light-color($name);
      border-color: transparent;

      #{$last-rule}__title,
      #{$last-rule}__text {
        color: $color;
      }

      #{$last-rule}__close {
        color: $--gray-5;
        &:focus,
        &:hover {
          color: theme-hover-color($name);
        }
      }
    }

    // Outline style
    &--outline-#{$name} {
      background-color: transparent;
      border-color: #f3f6f9;

      #{$last-rule}__icon {
        color: $color;
      }

      #{$last-rule}__text {
        color: $--gray-55;
      }

      #{$last-rule}__close {
        color: $--gray-5;
        &:focus,
        &:hover {
          color: theme-hover-color($name);
        }
      }
    }
  }

  // Elevate style
  &--shadow {
    box-shadow: $--alert-box-shadow;
  }

  &--large {
    padding: 1.5rem 2rem;
    #{$last-rule}__icon {
      i {
        font-size: 2.4rem;
      }
    }
    #{$last-rule}__title {
      font-size: 1.25rem;
    }
  }
}
